<template>
	<view class="schoollist">
		<view class="school-title">
			<u-subsection :list="list" @change="sectionChange" :current="current" active-color="#ffffff" bg-color="#ffffff" button-color="#1bb675"></u-subsection>
		</view>
		<view class="school-list" v-if="current == 0">
			<view class="school-item" @click="goto(1, 0, 'ESI国际排名')">
				<view class="logo icon1"></view>
				<view class="name">ESI国际排名</view>
				<view class="text">内地高校综合排名</view>
			</view>
			<view class="school-item" @click="goto(1, 1, '双一流高校')">
				<view class="logo icon2"></view>
				<view class="name">双一流高校</view>
				<view class="text">来源：教育部</view>
			</view>
			<view class="school-item" @click="goto(1, 2, 'QS世界大学排名')">
				<view class="logo icon3"></view>
				<view class="name">QS世界大学排名</view>
				<view class="text">世界大学综合排名</view>
			</view>
			<view class="school-item" @click="goto(1, 3, '泰晤士世界排名')">
				<view class="logo icon4"></view>
				<view class="name">泰晤士世界排名</view>
				<view class="text">新兴经济体大学排名</view>
			</view>
			<view class="school-item" @click="goto(1, 4, 'U.SNews排名')">
				<view class="logo icon5"></view>
				<view class="name">U.SNews排名</view>
				<view class="text">世界大学排名</view>
			</view>
			<view class="school-item" @click="goto(1, 5, '985高校')">
				<view class="logo icon6"></view>
				<view class="name">985高校</view>
				<view class="text">来源：教育部</view>
			</view>
			<view class="school-item" @click="goto(1, 6, '211高校')">
				<view class="logo icon7"></view>
				<view class="name">211高校</view>
				<view class="text">来源：教育部</view>
			</view>
			<view class="school-item" @click="goto(1, 7, '中央部属高校')">
				<view class="logo icon8"></view>
				<view class="name">中央部属高校</view>
				<view class="text">共116所</view>
			</view>
			<view class="school-item" @click="goto(1, 8, 部省合建高校)">
				<view class="logo icon9"></view>
				<view class="name">部省合建高校</view>
				<view class="text">一省一校，重点支持</view>
			</view>
			<view class="school-item" @click="goto(1, 9, '软科2020')">
				<view class="logo icon10"></view>
				<view class="name">软科2020</view>
				<view class="text">中国最好大学排名</view>
			</view>
			<view class="school-item" @click="goto(1, 10 , '校友会2020')">
				<view class="logo icon11"></view>
				<view class="name">校友会2020</view>
				<view class="text">中国大学排名800强</view>
			</view>
			<view class="school-item" @click="goto(1, 11, '武书连2020')">
				<view class="logo icon12"></view>
				<view class="name">武书连2020</view>
				<view class="text">中国大学综合排名</view>
			</view>
		</view>
		<view class="school-list" v-if="current == 1">
			<view class="school-item" @click="goto(2, 12, 'GDI高职高专榜')">
				<view class="logo icon13"></view>
				<view class="name">GDI高职高专榜</view>
				<view class="text">专科TOP1000</view>
			</view>
			<view class="school-item" @click="goto(2, 13, '专科TOP 100')">
				<view class="logo icon14"></view>
				<view class="name">专科TOP 100</view>
				<view class="text">来源：中国科教评价</view>
			</view>
			<view class="school-item" @click="goto(2, 14, '高职双高计划')">
				<view class="logo icon15"></view>
				<view class="name">高职双高计划</view>
				<view class="text">高水平学校和专业</view>
			</view>
			<view class="school-item" @click="goto(2, 15, '优质专科高职')">
				<view class="logo icon16"></view>
				<view class="name">优质专科高职</view>
				<view class="text">来源：教育部</view>
			</view>
			<view class="school-item" @click="goto(2, 16, '国家示范高职')">
				<view class="logo icon17"></view>
				<view class="name">国家示范高职</view>
				<view class="text">来源:教育部</view>
			</view>
			<view class="school-item" @click="goto(2, 17, '国家骨干高职')">
				<view class="logo icon18"></view>
				<view class="name">国家骨干高职</view>
				<view class="text">来源:教育部</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [
					{
						name: '本科榜单'
					}, 
					{
						name: '专科榜单'
					}
				],
				current: 0
			}
		},
		onLoad() {
			
		},
		methods: {
			sectionChange(index) {
				this.current = index;
			},
			goto(subjectType, rankingsType, title) {
				uni.navigateTo({
					url: "./rankDetail?subjectType="+subjectType+'&rankingsType='+rankingsType+'&title='+title
				})
			}
		},
	}
</script>
<style lang="less" scoped>
	.schoollist {
		padding: 30rpx;
		.school-title {
			margin-bottom: 30rpx;
		}
		.school-list {
			margin-top: ;
			.school-item {
				background-color: #FFFFFF;
				text-align: center;
				padding-top: 50rpx;
				padding-bottom: 30rpx;
				width: calc(50% - 10rpx);
				border-radius: 8rpx;
				display: inline-block;
				margin-bottom: 30rpx;
				.logo {
					display: inline-block;
					width: 70rpx;
					height: 70rpx;
					background-color: red;
				}
				.name {
					font-size: 32rpx;
					margin-top: 20rpx;
					margin-bottom: 10rpx;
				}
				.text {
					color: #d0d0d0;
				}
				.icon1 {
					background: url(../../static/ph/1.png) no-repeat;
					background-size: 100% 100%;
				}
				.icon2 {
					background: url(../../static/ph/2.png) no-repeat;
					background-size: 100% 100%;
				}
				.icon3 {
					background: url(../../static/ph/3.png) no-repeat;
					background-size: 100% 100%;
				}
				.icon4 {
					background: url(../../static/ph/4.png) no-repeat;
					background-size: 100% 100%;
				}
				.icon5 {
					background: url(../../static/ph/5.png) no-repeat;
					background-size: 100% 100%;
				}
				.icon6 {
					background: url(../../static/ph/6.png) no-repeat;
					background-size: 100% 100%;
				}
				.icon7 {
					background: url(../../static/ph/7.png) no-repeat;
					background-size: 100% 100%;
				}
				
				.icon8 {
					background: url(../../static/ph/8.png) no-repeat;
					background-size: 100% 100%;
				}
				.icon9 {
					background: url(../../static/ph/9.png) no-repeat;
					background-size: 100% 100%;
				}
				.icon10 {
					background: url(../../static/ph/10.png) no-repeat;
					background-size: 100% 100%;
				}
				.icon11 {
					background: url(../../static/ph/11.png) no-repeat;
					background-size: 100% 100%;
				}
				.icon12 {
					background: url(../../static/ph/12.png) no-repeat;
					background-size: 100% 100%;
				}
				.icon13 {
					background: url(../../static/ph/13.png) no-repeat;
					background-size: 100% 100%;
				}
				.icon14 {
					background: url(../../static/ph/14.png) no-repeat;
					background-size: 100% 100%;
				}
				.icon15 {
					background: url(../../static/ph/15.png) no-repeat;
					background-size: 100% 100%;
				}
				.icon16 {
					background: url(../../static/ph/16.png) no-repeat;
					background-size: 100% 100%;
				}
				.icon17 {
					background: url(../../static/ph/17.png) no-repeat;
					background-size: 100% 100%;
				}
				.icon18 {
					background: url(../../static/ph/18.png) no-repeat;
					background-size: 100% 100%;
				}
			}
			.school-item:nth-child(even) {
				margin-left: 20rpx;
			}
		}
	}
</style>
<style>
	page{
		background-color: #f5f5f5;
	}
</style>
